<template>
    <button class="l-btn"
            @click="link"
            :class="className"
            :style="{margin}"
            :disabled="loading || disabled">
        <div>
            <i class="icon icon-loading" v-if="loading"></i>
            <span>
                <slot></slot>
            </span>
        </div>
    </button>
</template>
<script>
    export default {
        name: "Button",
        props: {
            type: String,
            margin: String,
            to: String,
            loading: {
                type: Boolean,
                default: false
            },
            block: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            normal: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {}
        },
        watch: {},
        computed: {
            className() {
                let c = ''
                if (this.type) {
                    c += ' btn-' + this.type
                }
                if (this.normal) {
                    c += ' normal'
                }
                if (this.block) {
                    c += ' btn-block'
                }
                if (this.disabled || this.loading) {
                    c += ' btn-disabled'
                }
                return c
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            link() {
                this.$emit('click')
                if (this.to) {
                    this.$router.push(this.to)
                }
            }
        },
        components: {}
    }
</script>
<style lang="scss">
    @import "~@/style/var";

    .l-btn {
        font-size: 30px;
        border: 1px solid $button-color;
        background-color: $button-color;
        color: #fff;
        white-space: nowrap;
        padding: 15px 20px;
        outline: none;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &.fixed-btn {
            position: fixed;
            bottom: 0;
            left: 0;
            border-radius: 0;
        }

        &.g-btn {
            background: linear-gradient(to right, #ffa500, #ff7401);
            border-color: transparent;
        }

        & > div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        &.btn-text {
            background-color: transparent;
            color: $button-color;
            border: none;
        }

        &:active {
            opacity: .8;
            //background: rgba(161, 39, 39, 0.05);
            &:hover {
                opacity: .8;
            }
        }

        &.btn-block {
            width: 100%;
            display: block;
            margin: 0 auto;

            &.normal {
                width: 303px;
            }
        }

        &.btn-inline {
            width: auto;
            padding: 0 40px;
            display: inline-block;
        }

        &.btn-small {
            height: 60px;
        }

        &.btn-yellow {
            color: #b89d5d;
            border-color: #b89d5d;
        }

        &.btn-black {
            color: #000;
            border-color: #000;
        }

        &.btn-g {
            color: #fff;
            border: 2px solid #f89130;
            background-color: #fcae26;
            border-radius: 35px;
            padding: 15px 2em;
        }

        &.btn-disabled {
            color: #fff;
            border-color: #b7b7b7;
            background-color: #b7b7b7;
            -webkit-tap-highlight-color: transparent;

            &:active {
                opacity: 1;
            }
        }

        span {
            vertical-align: middle;
        }

        .icon {
            display: block;
            margin-right: 5px;

            &.icon-loading {
                position: relative;
                top: 1px; /*no*/
                &:before {
                    content: '';
                    display: inline-block;
                    width: 15px; /*no*/
                    height: 15px; /*no*/
                    background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cdefs%3E%3Cstyle/%3E%3C/defs%3E%3Cpath d='M515.698 969.127c-97.188 0-191.28-31.134-270.406-90.479C148.62 806.402 85.835 700.441 68.634 580.72s13.245-238.928 85.663-335.6C304.12 45.24 588.288 4.644 787.997 154.125c83.77 62.785 143.46 153.092 168.23 254.58 4.3 17.374-6.365 34.92-23.739 39.048-17.373 4.128-34.918-6.365-39.047-23.738-21.157-86.867-72.418-164.446-144.148-218.286-171.154-127.979-414.898-93.06-543.048 78.094-62.097 82.911-88.243 185.087-73.45 287.608s68.462 193.344 151.372 255.44c171.326 128.323 414.898 93.404 543.22-77.922 33.544-44.895 56.594-95.123 68.29-149.308 3.785-17.373 21.158-28.554 38.36-24.77 17.373 3.784 28.554 20.986 24.77 38.36-13.761 63.473-40.596 122.13-79.815 174.422-72.418 96.672-178.379 159.457-298.1 176.658-21.674 3.268-43.52 4.816-65.194 4.816z' fill='%23b7b7b7'/%3E%3C/svg%3E") no-repeat center center;
                    background-size: 100% 100%;
                    animation: loadingRotate 1s infinite linear;
                }
            }
        }
    }
</style>
